<template>
  <div class="home">
    <footer>
      <van-tabbar route>
        <van-tabbar-item replace :to="item.path" :icon="item.icon" v-for="(item,index) in mainRoute" :key="index">
        {{item.txt}}
        </van-tabbar-item>
      </van-tabbar>
    </footer>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  data(){
    return {
      mainRoute:[
        {
          txt:'用户管理',path: '/Home/User',
          icon:'manager',
        },
        {
          txt:'菜单管理', path: '/Home/Menu',
          icon:'bars',
        },
        {
          txt:'角色管理', path: '/Home/Role',
          icon:'friends',
        },
        {
          txt:'角色类型管理', path: '/Home/Type',
          icon:'gem',
        },
        {
          txt:'操作日志',path: '/Home/Operation',
          icon:'setting',
        }
      ]
    }
  },
  components: {
    HelloWorld,
  }
}
</script>

<style scoped lang="scss">
.home{
  width: 100%;
  height: 100%;
  display: flex;
  // border: 1px solid #ccc;
}
main{
  width: calc(100% - 100px);
  height: 100%;
}
footer{
  width: 100px;
  height: 600px;
  position: relative;
  // color: #fff;
  .van-tabbar {
    position: absolute;
    top: 0;
    width: 100px;
    height: 600px;
    display: flex;
    flex-direction: column;
    background: rgb(18, 58, 94);
    
  }
}
</style>
